<template>
	<view class="courseDetailPage">
		<u-status-bar></u-status-bar>
		<u-navbar @leftClick="goCustomNavBack" title=" " bgColor="transparent" :autoBack="true" leftIconColor="#fff"
			titleStyle="color:#fff;text">
		</u-navbar>
		<view class="courseContent"  v-if="isLoad" :style="{'padding-bottom': paddingBottomHeight + 'rpx'}">
			<view class="videoContent">
				<video :src="videoUrl" :muted="true" :show-mute-btn="true" play-btn-position="center"
					:autoplay="selectIndex===0?false:true" :enable-play-gesture="true" :show-casting-button="true"
					:show-screen-lock-button="true" :show-snapshot-button="true" style="width: 100vw;height: 60vw;"
					@play="doWatch" @ended="watchEnd"></video>
			</view>
			<view class="title-line">
				{{courseInfo.curriculumName}}
				<view class="subtitle-line">
					<text class="chapterIndex">{{chapterIndex.join('-')}}节:</text>
					<text>{{activeItem.courseName}}</text>
				</view>
			</view>
			<view class="liveBroadcast">
				<scroll-view class="scroll-view_H" :scroll-x="true" :scroll-into-view="scrollView">
					<view class="liveBroadcastList" :id="'video_'+item.id" v-for="(item,index) in childVideos" :key="index"
						@click="goDetail(item, index)" :class="{active: enterVideoId==item.id}">
						<view class="courseWrap">
							<view class="courseName">
								{{item.courseName}}
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="line"></view>
			<view class="videoList">
				<view class="detailContent">
					<view class="detailTitle">内容摘要</view>
					<u-parse style="width: 100%;word-break: break-all;" :content="activeItem.content || courseInfo.curriculumBrief"></u-parse>
				</view>
			</view>

		</view>
		<u-popup :show="showExchange" :round="10" mode="bottom" @close="doClose">
			<view class="exchangePanel">
				<view class="title">积分兑换</view>
				<view class="cost">{{exchangeInfo.vpoints}}
					<view class="unit">积分</view>
				</view>
				<view class="detail">
					<view class="userScore" v-if="exchangeInfo.canExchange">当前积分{{userScore}}</view>
					<view class="userScore" v-if="!exchangeInfo.canExchange">当前积分不足，请到任务中心获取积分</view>
					<view class="vBtn" @click="doExchange(exchangeInfo)">{{exchangeInfo.btnText}}</view>
				</view>
			</view>
		</u-popup>
		<view class="solutionOperate">
			<view class="operateItem specialItem" @click="collect">
				<u--image src="/static/solution/2.png" shape="square" mode="aspectFill" width="32rpx" height="32rpx"
					v-if="courseInfo && !courseInfo.isCollection">
				</u--image>
				<u--image src="/static/solution/22.png" shape="square" mode="aspectFill" width="32rpx" height="32rpx"
					v-else>
				</u--image>
				<view class="text">收藏</view>
			</view>
			<text style="display:inline-block;background:#999;height:32rpx;width:1px;"></text>
			<view class="operateItem specialItem" @click="showShareContent=true">
				<u--image src="/static/solution/1.png" shape="square" mode="aspectFill" width="32rpx" height="32rpx">
				</u--image>
				<view class="text">分享</view>
			</view>
			<!-- <view class="operateItem" @click="signup">
				<view class="signbutton">立即报名</view>
			</view> -->
		</view>
		<u-popup :show="showShareContent" :round="10" mode="bottom" @close="closeShare" @open="openShare">
			<view class="shareContent">
				<view class="title">分享到</view>
				<view class="shareInfo">
					<button class="shareItem" open-type="share">
						<u--image src="/static/share/2.png" radius="50%" shape="square" mode="aspectFill"
							width="106rpx" height="106rpx">
						</u--image>
						<view class="itemTitle">微信</view>
					</button>
					<button class="shareItem" @click="goDiscuss">
						<u--image src="/static/share/1.png" radius="50%" shape="square" mode="aspectFill"
							width="106rpx" height="106rpx">
						</u--image>
						<view class="itemTitle">社区内发帖</view>
					</button>
				</view>
			</view>
		</u-popup>
		<!-- <u-popup :show="showPopup" :round="10" mode="center" @close="closePopup" @open="openPopup">
			<view class="popup-form">
				<u--form :model="formInfo" labelPosition="left" ref="signForm">
					<u-form-item prop="name" borderBottom labelWidth="30" left-icon="account"
						left-icon-style="font-size:24px">
						<u--input v-model="formInfo.name" placeholder="请输入您的姓名" border="none"></u--input>
					</u-form-item>
					<u-form-item prop="phone" borderBottom labelWidth="30" left-icon="phone"
						left-icon-style="font-size:24px">
						<u--input v-model="formInfo.phone" placeholder="请输入您的电话" border="none"></u--input>
					</u-form-item>
					<u-form-item prop="email" borderBottom labelWidth="30" left-icon="email"
						left-icon-style="font-size:24px">
						<u--input v-model="formInfo.email" placeholder="请输入您的邮箱" border="none"></u--input>
					</u-form-item>
				</u--form>
				<view class="formbtn">
					<view class="confirm-button" @click="submitForm">提交</view>
				</view>
			</view>
		</u-popup> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: "",
				baseUrl: this.$api.baseUrl,
				isLoad: false,
				ascending: true,
				showExchange: false,
				exchangeInfo: {
					cost: "0",
					canExchange: false,
					btnText: "做任务"
				},
				userScore: 0,
				list: [],
				pageNo: 1,
				pageSize: 100,
				total: 0,
				isFinish: false,
				isLoading: false,
				userId: "",
				videoUrl: "",
				videoId: "",
				playArr: [],
				hasLoad: false,
				selectIndex: 0,
				isExpands: [],
				// tabList: ['简介', '目录', '推荐'],
				// 或者如下，也可以配置keyName参数修改对象键名
				// list: [{name: '未付款'}, {name: '待评价'}, {name: '已付款'}],
				curNow: 1,
				recommendList: [{
						id: 10001,
						title: '机器视觉入门课程系列备份',
						imgurl: '/static/logo.png',
						courseNum: 10,
						studyNum: 1000
					},
					{
						id: 10002,
						title: '机器视觉入门课程系列备份',
						imgurl: '/static/logo.png',
						courseNum: 10,
						studyNum: 1000
					},
					{
						id: 10003,
						title: '机器视觉入门课程系列备份',
						imgurl: '/static/logo.png',
						courseNum: 10,
						studyNum: 1000
					}
				],
				courseInfo: {},
				childVideos: [],
				activeItem: {},
				enterVideoId: "",
				showShareContent: false,
				formInfo: {
					name: '',
					phone: '',
					email: ''
				},
				showPopup: false,
				rules: {
					name: [{
						required: true,
						message: '请输入真实姓名',
						min: 2,
						max: 10,
						// 可以单个或者同时写两个触发验证方式 
						trigger: 'change',
					}],
					phone: [{
						pattern: /^1[0-9]{10}$/,
						message: '请输入正确的手机号',
						trigger: 'change'
					}],
					email: [{
						pattern: /^\w{3,}(\.\w+)*@[a-zA-Z0-9]+(\.[a-zA-Z]{2,5}){1,2}$/,
						message: '请输入正确的邮箱地址',
						trigger: 'change'
					}]
				},
				paddingBottomHeight: 40,
			    chapterIndex: [1],
				devicePixelRatio: 2,
				scrollView: ''
			}
		},
		computed: {
			scollLeft() {
				let scollLeft = 0
				this.childVideos.forEach((item, index) => {
					if (item.id == this.videoId) {
						scollLeft = (290 * index)
					}
				})
				return Math.ceil(scollLeft/2*this.devicePixelRatio)
			}
		},
		onLoad(option) {
			uni.getStorage({
				key: "userInfo",
				success: (userInfo) => {
					this.userId = userInfo.data.id;
					this.$request.get(this.$api.getUserById, {
						id: this.userId
					}).then(result => {
						this.userScore = result.result.integral;
						uni.hideLoading()
					})
					this.id = option.id;
					this.enterVideoId = option.videoId
					this.initData();
				},
			})
			
			uni.getSystemInfo({
				success: function(res) {
					this.devicePixelRatio = res.devicePixelRatio
					let model = ['X', 'XR', 'XS', '11', '12', '13', '14', '15'];
					model.forEach(item => {
						//适配iphoneX以上的底部，给tabbar一定高度的padding-bottom
						if (res.model.indexOf(item) != -1 && res.model.indexOf('iPhone') != -1) {
							this.paddingBottomHeight = 40 + 40;
						}
					})
				}
			})
		},
		onReachBottom() {
			// if (!this.isLoading && !this.isFinish) {
			// 	this.pageNo++;
			// 	this.initData();
			// }
		},
		methods: {
			expandToggle(index) {
				this.$set(this.isExpands, index, !this.isExpands[index])
			},
			goDetail(item, index) {
				this.videoUrl = this.$appFunc.getFileUrl(item.uploadVideo)
				this.videoId = item.id
				this.enterVideoId = item.id
				this.selectIndex = index
				this.activeItem = item
				this.setChapterIndex()
			},
			setChapterIndex() {
				this.list.forEach((item, index) => {
					if (this.videoId == item.id) {
						this.chapterIndex = [index+1]
					}
					item.list.forEach((citem, cindex) => {
						if (this.videoId == citem.id) {
							this.chapterIndex = [index+1, cindex+1]
						}
					})
				})
			},
			signup() {
				this.showPopup = true
			},
			openPopup() {},
			closePopup() {
				this.showPopup = false
			},
			submitForm() {
				if (!this.formInfo.name) {
					uni.showToast({
						icon: "none",
						title: "请输入姓名"
					})
					return;
				}
				if (!this.rules.phone[0].pattern.test(this.formInfo.phone)) {
					uni.showToast({
						icon: "none",
						title: this.rules.phone[0].message
					})
					return;
				}
				if (!this.rules.email[0].pattern.test(this.formInfo.email)) {
					uni.showToast({
						icon: "none",
						title: this.rules.email[0].message
					})
					return;
				}
				this.showPopup = false
				let signupData = {
					name: this.formInfo.name,
					collection: this.formInfo.phone,
					readingVolume: this.formInfo.email,
					sysOrgCode: this.id,
					createBy: this.userId,
				}
				this.$request.post(this.$api.signupAdd, signupData).then(res => {
					uni.hideLoading()
					uni.showToast({
						icon: "none",
						title: "恭喜你, 报名成功!"
					})
				})				
				
			},
			collect() {
				let url = ""
				if (this.courseInfo.isCollection) {
					url = this.$api.courseCancelCollection
				} else {
					url = this.$api.courseCollection
				}
				this.$request.get(url, {
					id: this.courseInfo.id,
					userId: this.userId
				}).then(res => {
					uni.hideLoading()
					if (!this.courseInfo.isCollection) {
						this.courseInfo.isCollection = true;
						uni.showToast({
							icon: "success",
							title: "收藏成功",
							duration: 3000
						})
						return;
					}
					if (this.courseInfo.isCollection) {
						this.courseInfo.isCollection = false;
						uni.showToast({
							icon: "success",
							title: "取消收藏成功",
							duration: 3000
						})
						return;
					}
					
				})
			},
			goDiscuss() {
				uni.setStorage({
					key: "shareData",
					data: {
						id: this.courseInfo.id,
						types: "5"
					},
					success: () => {
						uni.switchTab({
							url: "/pages/discuss/discuss"
						})
					}
				})
			},
			initData(isRefresh) {
				this.isLoading = true;
				Promise.all([
					this.$request.get(this.$api.studyDetail, {
						type: this.ascending ? '1' : '2',
						pageNo: this.pageNo,
						pageSize: this.pageSize,
						curriculumId: this.id,
						userId: this.userId
					}),
				]).then(res => {
					uni.hideLoading()
					if (isRefresh) {
						uni.stopPullDownRefresh()
					}
					this.isLoading = false;
					let isExpands = []
					for (let i = 0; i < res[0].result.records.length; i++) {
						isExpands.push(true)
					}
					this.isExpands = this.isExpands.concat(isExpands)
					this.list = res[0].result.records
					let childVideos =[]
					this.list.forEach((item, index) => {
						if (this.enterVideoId == item.id) {
							// this.childVideos = this.list.filter(litem => {
							// 	return litem.uploadVideo
							// })
							this.activeItem = item
							this.selectIndex = index
							this.chapterIndex = [index+1]
						}
						childVideos = childVideos.concat(item.list)
						item.list.forEach((citem, cindex) => {
							if (this.enterVideoId == citem.id) {
								// this.childVideos = item.list.filter(litem => {
								// 	return litem.uploadVideo
								// })
								this.activeItem = citem
								this.selectIndex = cindex
								this.chapterIndex = [index+1, cindex+1]
							}
						})
					})
					this.childVideos = childVideos
					// console.log('this.childVideos', this.childVideos)
					// 根据进入id进行播放视频
					if (!this.isLoad) {
						if (this.activeItem) {
							this.hasLoad = true;
							this.videoUrl = this.activeItem.uploadVideo
							this.videoId = this.activeItem.id
							this.scrollView = 'video_' + this.videoId
						} else {
							this.list.map(item => {
								if (!this.videoUrl && !this
									.hasLoad) {
									this.hasLoad = true;
									// uni.downloadFile({
									// 	url: this.baseUrl + '/sys/common/static/' + item.uploadVideo,
									// 	success: (res) => {
									// 		console.log(res)
									// 		var temp = res.tempFilePath
									// 		this.videoUrl = temp
									// 		this.videoId = item.id
									// 	}
									// })
									this.videoUrl = item.uploadVideo
									this.videoId = item.id
								}
							})
						}
					}
					this.total = res[0].result.total;
					if (this.pageNo * this.pageSize < this.total) {
						this.isFinish = false
					} else {
						this.isFinish = true
					}
					this.isLoad = true;

					this.$request.get(this.$api.videoCountList, {
						id: this.id,
						userId: this.userId
					}).then(res => {
						console.log("阅读量+1", res.result)
						this.playArr.push(this.id)
						this.courseInfo = res.result
						uni.hideLoading()
					})
				})
			},
			doSearch() {
				this.isFinish = false;
				if (!this.isLoading) {
					this.pageNo = 1;
					this.list = [];
					this.initData(true);
				}
			},
			doFilter() {
				this.ascending = !this.ascending;
				this.doSearch();
			},
			doChange(item) {
				if (item.vpoints === '0') return;
				this.showExchange = true;
				if (item.vpoints > this.userScore) {
					this.exchangeInfo.id = item.id;
					this.exchangeInfo.canExchange = false;
					this.exchangeInfo.btnText = "做任务"
					this.exchangeInfo.vpoints = item.vpoints || item.vsPoints
				} else {
					this.exchangeInfo.id = item.id;
					this.exchangeInfo.canExchange = true;
					this.exchangeInfo.btnText = "立即兑换"
					this.exchangeInfo.vpoints = item.vpoints || item.vsPoints
				}
			},
			doChangeAll() {
				if (this.courseInfo.isExchange) return;
				this.showExchange = true;
				let vpoints = 0
				if (this.list) {
					this.list.forEach(item => {
						vpoints += Number(item.vpoints)
						item.list.forEach(citem => {
							vpoints += Number(citem.vsPoints)
						})
					})
				}
				if (vpoints > this.userScore) {
					this.exchangeInfo.id = this.id;
					this.exchangeInfo.canExchange = false;
					this.exchangeInfo.btnText = "做任务"
					this.exchangeInfo.vpoints = vpoints
				} else {
					this.exchangeInfo.id = this.id;
					this.exchangeInfo.canExchange = true;
					this.exchangeInfo.btnText = "立即兑换"
					this.exchangeInfo.vpoints = vpoints
				}
			},
			doClose() {
				this.showExchange = false
			},
			closeShare() {
				this.showShareContent = false;
			},
			openShare() {
				this.showShareContent = true;
			},
			refreshUser() {
				this.isFinish = false;
				if (!this.isLoading) {
					this.pageNo = 1;
					this.list = [];
					this.isLoading = true;
					Promise.all([
						this.$request.get(this.$api.studyDetail, {
							type: this.ascending ? '1' : '2',
							pageNo: this.pageNo,
							pageSize: this.pageSize,
							curriculumId: this.id,
							userId: this.userId
						}),
					]).then(res => {
						this.isLoading = false;
						this.list = this.list.concat(res[0].result.records);
						this.total = res[0].result.total;
						if (this.pageNo * this.pageSize < this.total) {
							this.isFinish = false
						} else {
							this.isFinish = true
						}
						this.$request.get(this.$api.getUserById, {
							id: this.userId
						}).then(result => {
							this.userScore = result.result.integral;
						})
						uni.showToast({
							title: "兑换成功",
							icon: "none"
						})
						this.courseInfo.isExchange = true
						this.showExchange = false;
						uni.hideLoading()
					})
				}
			},
			doExchange(item) {
				if (item.vpoints > this.userScore) {
					uni.navigateTo({
						url: "/pages/taskCenter/taskCenter"
					})
				} else {
					this.$request.post(this.$api.doExchange, {
						integral: item.vpoints,
						otherId: item.id,
						userId: this.userId,
						exchangeType: 3
					}).then(res => {
						this.refreshUser();
						uni.hideLoading()
					})
				}
			},
			//列表点击切换
			changeVideo(item, index, isExpand = 0) {
				// 一级菜单 下面有子课程就不播放 撤回
				if (!item.uploadVideo) {
					return
				}
				this.videoUrl = this.$appFunc.getFileUrl(item.uploadVideo)
				if (item.isExchange || item.vpoints === "0" || this.courseInfo.isExchange) {
					/* uni.downloadFile({
						url: this.baseUrl + '/sys/common/static/' + item.uploadVideo,
						success: (res) => {
							var temp = res.tempFilePath
							this.videoUrl = temp
							this.videoId = item.id
						}
					}) */
					this.videoUrl = item.uploadVideo
					this.videoId = item.id
					this.selectIndex = index
				} else {
					// this.doChange(item)
					this.doChangeAll()
				}
			},
			//视频点击播放
			doWatch() {
				let index = this.playArr.indexOf(this.videoId);
				if (index === -1) {
					this.playArr.push(this.videoId)
					// this.$request.get(this.$api.videoCount, {
					// 	id: this.videoId,
					// 	userId: this.userId
					// }).then(res => {
					// 	console.log("阅读量+1")
					// 	this.playArr.push(this.videoId)
					// 	uni.hideLoading()
					// })
				}
			},
			//播放结束
			watchEnd() {
				if (this.selectIndex !== this.childVideos.length - 1) {
					uni.showToast({
						title: "即将播放：" + (this.childVideos[this.selectIndex + 1].courseName),
						icon: "none"
					})
					setTimeout(() => {
						this.goDetail(this.childVideos[this.selectIndex + 1], this.selectIndex + 1)
					}, 2000)
				}
				this.$request.get(this.$api.videoGetintegral, {
					id: this.videoId,
					userId: this.userId
				}).then(res => {
					console.log("观看结束", res)
					uni.hideLoading()
				})
			},
			//tab目录切换
			// sectionChange(index) {
			// 	this.curNow = index;
			// }
			navBtnClick(index) {
				this.curNow = index
			}
		}
	}
</script>

<style lang="scss">
	.courseDetailPage {
		min-height: 100vh;
		background-color: #fff;
		
		.u-navbar--fixed {
			z-index: 999 !important;
		}

		// .u-subsection__item{
		// 	border-radius:25rpx;
		// }
		.courseContent {
			.nav {
				display: flex;
				flex-direction: row;
				justify-content: center;
				margin-bottom: 16rpx;

				.navBtn {
					width: 24vw;
					margin: 0 4vw;
					display: block;
					background-color: #eee;
					font-size: 30rpx;
					border-radius: 60rpx;
					color: #333;
					text-align: center;
					padding: 10rpx 0;
				}

				.active {
					background-color: #0157FA;
					color: #fff;
				}
			}

			.videoContent {
				width: 100vw;
				display: flex;
				justify-content: center;
			}

			.videoTitle {
				padding: 0 40rpx;
				display: flex;
				flex-direction: column;
				background-color: #fff;

				.titleContent {
					display: flex;
					justify-content: space-between;
					border-bottom: 1rpx solid #eee;
					background-color: #fff;

					.title {
						font-size: 32rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 500;
						color: #333333;
						line-height: 88rpx;
					}

					.titleOperate {
						display: flex;
						justify-content: flex-end;
						color: #707070;
						align-items: center;
						line-height: 88rpx;
						font-size: 26rpx;

						.ascendIcon {
							margin-left: 10rpx;
						}

						.descend {
							transform: rotate(180deg);
						}
					}
				}
			}

			.videoList {
				padding-bottom: 60rpx;
				display: flex;
				flex-direction: column;
				background-color: #fff;

				.container {
					display: flex;
					justify-content: space-between;
					padding: 0 40rpx;
					margin: 36rpx 0;

					.rightBox {
						height: 230rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						margin-left: 66rpx;
						width: calc(100% - 236rpx);

						.title {
							margin-top: 40rpx;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							word-break: break-all;
							overflow: hidden;
							text-overflow: ellipsis;
							color: #333;
							font-size: 30rpx;
							line-height: 1.5;
						}

						.rightBoxInfo {
							margin-bottom: 12rpx;
							font-size: 26rpx;
							color: #C2C2C2;
						}
					}
				}

				.detailContent {
					display: inline-block;
					position: relative;
					width: 670rpx;
					overflow-x: hidden;
					overflow-y: auto;
					padding: 40rpx;
					color: #868686;
					.detailTitle {
						color: #333333;
						padding-bottom: 10rpx;
						font-weight: bold;
						font-size: 36rpx;
					}
				}

				.list {
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #333333;
					align-items: center;

					.listBox {
						display: flex;
						justify-content: flex-start;
						padding: 20rpx 40rpx;
						border-bottom: 1px solid #eee;
						align-items: center;
					}

					.index {
						width: 40rpx;
					}

					.detail {
						display: flex;
						justify-content: flex-start;
						flex-direction: column;
						width: calc(100% - 150rpx);
						line-height: 50rpx;

						.name {
							font-weight: 500;
							display: flex;
							flex-direction: row;
							justify-content: flex-start;
						}

						.content {
							display: flex;
							flex-wrap: nowrap;
							justify-content: flex-start;
							font-size: 24rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #999999;

							.count {
								padding-left: 40rpx;
							}
						}
					}

					.status {
						padding: 0 12rpx;
						font-size: 22rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #777;
						background: #eee;
						border-radius: 20rpx;
						margin-left: 10rpx;
					}

					.openBtn {
						color: #fff;
						font-size: 22rpx;
						background-color: #0157FA;
						border-radius: 60rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						width: 110rpx;
						height: 44rpx;
						line-height: 44rpx;

						.icon-arrow-box {
							transform: rotate(180deg);
						}

						.icon-arrow-box.reverse {
							transform: rotate(0);
						}

						.extext {
							padding-right: 10rpx;
						}
					}

					.orange {
						color: #EC6C2F;
					}

					.childVideo {
						height: 0;
						margin: 0 30rpx 0 73rpx;
						width: calc(100vw - 103rpx);
						transition: all 0.3s ease-in;
						overflow: hidden;

						&:not(.expand) {
							display: block;
							height: auto;
						}

						.detail {
							border-bottom: 1px solid #eee;
							margin-left: 32rpx;
							padding: 15rpx 13rpx;
							position: relative;
						}

						.detail:before {
							content: '';
							width: 14rpx;
							height: 14rpx;
							border-radius: 50%;
							background-color: #D8D8D8;
							display: inline-block;
							position: absolute;
							top: 50%;
							left: -24rpx;
							transform: translateY(-50%);
						}
					}

				}
			}

			.liveBroadcast {
				width: calc(100% - 80rpx);
				overflow-x: auto;
				padding: 0 40rpx 40rpx 40rpx;
				height:166rpx;
				.scroll-view_H {
					white-space: nowrap;
					width: 100%;
					height:166rpx;
					.list-wrap {
						display: flex;
						flex-direction: row;
						align-items: center;
					}
				}
				.liveBroadcastList {
					margin-right: 20rpx;
					background-color: #eee;
					border-radius: 12rpx;
					box-sizing: border-box;
					color: #333333;
					width:290rpx;
					height:166rpx;
					white-space: normal;
					flex-shrink: 0;
					display: inline-block;
					flex-direction: row;
					align-items: center;
					&.active {
						color:#004DA1;
					}
					.courseWrap {
						height: 100%;
						position: relative;
					}
					.courseName{
						font-size: 28rpx;
						line-height: 40rpx;
						padding:0 12rpx;
						display: -webkit-box;
						overflow: hidden;
						text-overflow: ellipsis;
						-webkit-line-clamp: 3;
						-webkit-box-orient: vertical;
						word-break: break-all;
						position: absolute;
						top: 50%;
						transform: translateY(-50%);
					}
					.name {
						font-weight: 400;
						font-size: 28rpx;
						line-height: 40rpx;
						padding:0 12rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 3;
						-webkit-box-orient: vertical;
						box-sizing: border-box;
						word-break: break-all;
						display:flex;
						align-items:center;
						width:290rpx;
						height:166rpx;
					}
					.title {
						position: absolute;
						left: 0;
						top: 0;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
						font-size: 28rpx;
						line-height: 28rpx;
						height: 28rpx;
						padding: 26rpx 24rpx 0;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 1;
						-webkit-box-orient: vertical;
						width: calc(100% -48rpx);
					}
					.courseTime{
						display:flex;
						justify-content: flex-end;
						align-items: center;
						background-image: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,1) 100%);
						padding:8rpx 12rpx;
						position: absolute;
						left:0;
						bottom:0;
						width:calc(100% - 24rpx);
					}
					
					
				}
			}
		}


		.exchangePanel {
			display: flex;
			text-align: center;
			flex-direction: column;

			.title {
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
				font-size: 28rpx;
				border-bottom: 1rpx solid #eee;
				height: 100rpx;
				line-height: 100rpx;
			}

			.cost {
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				font-size: 46rpx;
				color: #EC6C2FFF;
				display: flex;
				flex-wrap: nowrap;
				justify-content: center;
				border-bottom: 1rpx solid #eee;
				height: 100rpx;
				line-height: 100rpx;

				.unit {
					font-size: 24rpx;
					position: relative;
					top: 6rpx;
					left: 2rpx;
					color: #333333;
				}
			}

			.detail {
				line-height: 100rpx;
				display: flex;
				align-items: center;
				flex-direction: column;
				padding-bottom: 40rpx;

				.userScore {
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
					font-size: 30rpx;
				}

				.vBtn {
					background: linear-gradient(180deg, #87C5FC 0%, #247FFF 100%);
					border-radius: 48rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #FFFFFF;
					font-size: 34rpx;
					height: 96rpx;
					width: 680rpx;
				}
			}
		}

		.solutionOperate {
			display: flex;
			justify-content: space-around;
			align-items:center;
			flex-wrap: nowrap;
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100vw;
			box-shadow: 0px -2px 4px 1px rgba(0, 0, 0, 0.04);
			background: #ffffff;
			padding-bottom: 0;
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);
			padding-left: 60rpx;
			padding-right: 60rpx;
			box-sizing: border-box;

			.operateItem {
				display: flex;
				justify-content: center;
				flex-wrap: nowrap;
				align-items: center;
				font-size: 26rpx;
				padding: 24rpx 0;
				position: relative;
				width: 160rpx;

				.text {
					padding-left: 8rpx;
					display: inline-block;
				}
			}

			.specialItem {
				// &:after {
				// 	content: "";
				// 	display: inline-block;
				// 	height: 32rpx;
				// 	width: 1px;
				// 	background-color: #BDBDBDFF;
				// 	position: absolute;
				// 	right: 0;
				// 	top: calc(50% - 16rpx);
				// }
			}
		}

		.signbutton {
			background: linear-gradient(180deg, #87C5FC 0%, #247FFF 100%);
			border-radius: 19px 19px 19px 19px;
			// height: 40px;
			width: 350rpx;
			padding: 24rpx 0;
			// line-height: 40px;
			color: #fff;
			text-align: center;
		}

		.title-line {
			margin: 30rpx 30rpx 37rpx;
			padding: 0 10rpx 37rpx;
			border-bottom: 1px solid #F4F4F4;
			font-weight: bold;
			font-size: 36rpx;
			color: #333333;
			.subtitle-line {
				font-size: 28rpx;
				color: #999999;
				font-weight: normal;
				padding-top: 10rpx;
				.chapterIndex {
					padding-right: 10rpx;
				}
			}
		}
		.line {
			margin: 0rpx 30rpx;
			width: 690rpx;
			border-bottom: 1px solid #F4F4F4;
		}
		.shareContent {
			height: 400rpx;
		
			.title {
				height: 100rpx;
				border-bottom: 1rpx solid #eeeeee;
				text-align: center;
				line-height: 100rpx;
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
			}
		
			.shareInfo {
				display: flex;
				justify-content: space-around;
				flex-wrap: nowrap;
				padding-top: 40rpx;
		
				.shareItem {
					display: flex;
					flex-direction: column;
					align-items: center;
		
					.itemTitle {
						padding-top: 30rpx;
						font-size: 24rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #666666;
					}
				}
			}
		}
		.popup-form {
			padding: 100rpx 50rpx;
			width: 660rpx;
			box-sizing: border-box;
		
			.tip {
				color: $uni-text-color-grey;
				padding-top: 30rpx;
			}
		
			.u-form {
				padding-bottom: 30rpx;
			}
		
			.u-form-item {
				background-color: rgba(239, 239, 239, 1);
				border-radius: 48px;
				padding: 0rpx 40rpx;
				margin-bottom: 40rpx;
			}
		
			.confirm-button {
				background: linear-gradient(180deg, #87C5FC 0%, #247FFF 100%);
				box-shadow: 0px 1px 0px 1px #aec3db;
				border-radius: 48px;
				height: 45px;
				width: 100%;
				line-height: 45px;
				color: #fff;
				text-align: center;
			}
		
		}
	}
</style>
